import React from 'react'
import { Form, Radio, Select } from 'antd'
import { formItemLayout } from '../BaseFilter'

const ProjectTypeFilter = () => (
    <Radio.Group defaultValue="all" buttonStyle="solid">
        <Radio.Button value="all">全部</Radio.Button>
        <Radio.Button value="software_dev">软件系统开发</Radio.Button>
        <Radio.Button value="web_design">网页设计</Radio.Button>
        <Radio.Button value="design">美工</Radio.Button>
        <Radio.Button value="security">安全监测</Radio.Button>
        <Radio.Button value="country">运维</Radio.Button>

    </Radio.Group>
)

const ItemOrderFilter = () => (
    <Radio.Group defaultValue="all" buttonStyle="solid">
        <Radio.Button value="all">显示全部</Radio.Button>
        <Radio.Button value="newest">最新发布</Radio.Button>
        <Radio.Button value="signTime">报名时间</Radio.Button>
        <Radio.Button value="endTime">截止时间</Radio.Button>
    </Radio.Group>
)

interface TeacherSelection {
    readonly key: string;
    readonly value: string;
}

interface TeacherFilterProps {
    readonly selection: TeacherSelection[];
}

interface TeacherFilterState {

}

class TeacherFilter extends React.Component<TeacherFilterProps, TeacherFilterState> {
    handleChange = () => {
        return ''
    }

    renderSelection = () => {
        return (
            this.props.selection.map((item) => (
                <Select.Option key={item.key}>{item.value}</Select.Option>
            ))
        )
    }

    render () {
        return (
            <Select
                mode="multiple"
                style={{ width: '100%' }}
                placeholder="无筛选"
                onChange={this.handleChange}
            >
                {this.renderSelection()}
            </Select>
        )
    }
}

const mockTeacherSelection: TeacherSelection[] = [
    {
        key: 'huang',
        value: '黄安'
    }
]

export class ProjectFilterForm extends React.Component<any, any> {
    render () {
        return (
            <div>
                <Form {...formItemLayout} >
                    <Form.Item label='类别'>
                        <ProjectTypeFilter/>
                    </Form.Item>
                    <Form.Item label='排序方式'>
                        <ItemOrderFilter/>
                    </Form.Item>
                    <Form.Item label='指导老师'>
                        <TeacherFilter selection={mockTeacherSelection}/>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}
